<template>
	<view class="bg-white main">
		<!-- 富文本编辑器 -->
		<editor id="editor" class="ql-container padding-0" placeholder="加载中..." @ready="onEditorReady" read-only="true">
		</editor>
		<view class="margin-top-sm flex justify-between">
			<view class="cu-capsule radius margin-left-xl">
				<view class='cu-tag bg-red '>
					<text class='cuIcon-likefill'></text>
				</view>
				<view class="cu-tag line-red">
					<text v-text="islikes"></text>
				</view>
			</view>
			<view class="cu-capsule radius">
				<view class='cu-tag bg-grey '>
					<text class='cuIcon-attentionfill'></text>
				</view>
				<view class="cu-tag line-grey">
					<text v-text="views"></text>
				</view>
			</view>
			<view class="cu-capsule radius margin-right-xl">
				<view class='cu-tag bg-blue '>
					<text class='cuIcon-messagefill'></text>
				</view>
				<view class="cu-tag line-blue">
					<text v-text="messages"></text>
				</view>
			</view>
		</view>
		<view class="clike">
			<text class='text-red' :class="'cuIcon-'+[islike==true?'likefill':'like']" style="font-size: 50px;" @click="onLike()"></text>
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-titles text-orange "></text> 为你推荐
			</view>
		</view>
		<view class="cu-card article no-card">
			<view v-for="(recommend,index) in recommendList" :key="index" class="cu-item shadow" @click="openArticle(recommend.id)">
				
				<view class="content">
					<image :src="recommend.first_picture"
					 mode="aspectFill"></image>
					<view class="desc">
						<view class="text-contente flex justify-between">
							<view class="text-cut">{{recommend.title}}</view>
							<view class="text-gray text-df margin-right">点进看看</view>
						</view>
						<view class="text-content text-sm text-gray">{{recommend.synopsis}}</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				title: '',
				synopsis: '',
				content: '',
				id: '',
				islike: false,
				islikes: 0,
				recommendList:[],
				views:0,
				messages:0
			}
		},
		// 监听页面加载
		onLoad(e) {
			this.id = e.id;
			//this.user_id=e.user_id;
			//console.info(this.user_id)
		},
		// 监听页面显示
		onShow() {			
			this.$H.get('/find/article/get-article/' + this.id).then(res => {
				let [err, result] = res;
				if (result.data.code == '200') {
					this.title = result.data.data.title;
					this.synopsis = result.data.data.synopsis;
					this.islikes = result.data.data.islikes;
					this.views = result.data.data.views;
					this.messages = result.data.data.messages;
				}
			})
			this.$H.get('/find/article/get-content/' + this.id).then(res => {
				let [err, result] = res;
				if (result.data.code == '200') {
					this.content = result.data.data;
				}
			})
			this.$H.get('/find/recommend/get-like/' + this.$store.state.userInfo.id +'/' + this.id).then(res => {
				let [err, result] = res;
				if (result.data.code == '200') {
					this.islike = result.data.data;
				}
			})
			this.$H.get('/find/recommend/get-recommendationList/'+this.$store.state.userInfo.id).then(res=>{
				let [err,result] = res;
				if(result.data.code == '200'){
					this.recommendList = result.data.data;
					//for(let i=0;i<this.recommendList.length;i++){
					//	for(let j=0;j<40)
					//}
				}
			})
			//console.info(this.recommendList.length)
		},
		computed:{
			
		},
		methods: {
			onLike(){
				//console.info(this.islike)
				if(this.islike == false){
					this.islike = true
					this.islikes = this.islikes+1
					this.$H.post('/find/recommend/save-like',{
						user_id:this.$store.state.userInfo.id,
						article_id:this.id
					}).then(res=>{
						let [err,result] = res;
						if(result.data.code == '401'){
							uni.showModal({
								title:'错误提示',
								content:result.data.message,
								showCancel:false
							})
							return;
						}
						if(result.data.code == '200'){
							//this.$store.commit('alterUserInfo',result.data.data);
							uni.showModal({
								title:'成功',
								content:'操作成功',
								showCancel:false,
							})
						}
					})
					/*this.$H.put('/find/article/alter-articleLike/' + this.id, {
						islikes: this.islikes
					}).then(res => {
						let [err, result] = res;
						if (result.data.code == '501') {
							uni.showModal({
								title: '错误提示',
								content: '网络繁忙,请稍后重试!',
								showCancel: false
							})
							return;
						}
						if(result.data.code == '200'){
							uni.showModal({
								title: '成功提示',
								content: '保存成功',
								showCancel: false
								
							})
						}
					})*/
				}
				
			},
			articleCompile() {
				uni.navigateTo({
					url: '../article-compile/article-compile?aid=' + this.aid,
					animationType: 'slide-in-right',
					animationDuration: '200'
				})
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({
						html: this.content
					})
				}).exec();
			},
			deleteArticle() {
				this.$H.del('/article/deleteArticle/' + this.aid).then(res => {
					let [err, result] = res;
					if (result.data.code == '501') {
						uni.showModal({
							title: '错误提示',
							content: '服务器繁忙',
							showCancel: false
						})
						return;
					}
					if (result.data.code == '200') {
						// 修改用户信息
						this.$store.commit('alterUserInfo', result.data.data);
						uni.showModal({
							title: '删除成功',
							content: '文章删除成功,即将返回上一页',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack({
										animationType: 'slide-out-left',
										animationDuration: '200'
									})
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	@import url("../../common/css/editor-icon.css");
	.main{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
	    background-color: white;
	}
	.clike{
		position: fixed;
		bottom: 10px;
		right: 10px;
		z-index: 100;
	}
</style>
